<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            background-image: url("images/libg6.jpeg");
            /*设置背景图片尺寸:宽度 高度*/
            background-size: 100% 100%;
            /*设置禁止重复*/
            background-repeat: no-repeat;
        }

        body > div {
            padding: 0;
        }

        .num {
            color: #fff;
            width: 100%;
            height: 900px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .logo {
            position: absolute;
            width: 230px;
            display: block;
            top: 25px;
            text-align: left;
            left: 30px;
        }

        .hotline {
            position: absolute;
            width: 200px;
            line-height: 67px;
            text-align: right;
            right: 25px;
            top: 0;
        }

        .hotline img {
            vertical-align: middle;
        }

        .hotline span {
            vertical-align: middle;
            font-size: 18px;
            color: #2d93f0;
        }

        .el-dropdown-link {
            margin-left: 50%;
        }

        a {
            text-decoration: none
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="67px">
            <div style="width: 100%;height: 67px;">
                <a href="index.html" class="logo">
                    <img src="./images/logob.png" alt="宠物之家"/>
                </a>
                <div>
                    <audio id="v1" >
                        <source src="./voi/voi1.mp3">
                    </audio>
                    <audio id="v2" >
                        <source src="./voi/voi2.mp3">
                    </audio>
                    <audio id="v3" >
                        <source src="./voi/voi3.mp3">
                    </audio>
                    <audio id="v4" >
                        <source src="./voi/voi4.mp3">
                    </audio>
                    <audio id="v5" >
                        <source src="./voi/voi5.mp3">
                    </audio>
                    <audio id="v6" >
                        <source src="./voi/voi6.mp3">
                    </audio>
                    <audio id="v7" >
                        <source src="./voi/voi7.mp3">
                    </audio>
                </div>


                <el-dropdown class="el-dropdown-link" trigger="click" placement="bottom">
                    <span>
                        <i class="el-icon-arrow-down"></i>
                    </span>
                    <el-dropdown-menu  >
                        <el-row :gutter="20">
                            <el-col :span="24/7" style="margin-left: 15px">
                                <el-button id="b1" circle style="background-color: aquamarine" @click="func('v1')">do</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b2" circle style="background-color: coral" @click="func('v2')">re</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b3" circle style="background-color: #3f9bfb" @click="func('v3')">mi</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b4" circle style="background-color: lightgreen" @click="func('v4')">fa</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b5" circle style="background-color: cyan" @click="func('v5')">so</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b6" circle style="background-color: lightsalmon" @click="func('v6')">la</el-button>
                            </el-col>
                            <el-col :span="24/7">
                                <el-button id="b7" circle style="background-color: greenyellow" @click="func('v7')">xi</el-button>
                            </el-col>
                            <el-col :span="24/7"></el-col>
                        </el-row>
                    </el-dropdown-menu>
                </el-dropdown>

                <div class="hotline">
                    <img src="./images/telb.png" alt=""/>
                    <span>010-57732658</span>
                </div>
            </div>
        </el-header>

        <el-main id="num_7" class="num">
            <el-card style="width: 550px;height: 300px;
                     margin-left: 70%;margin-top:10%;
                     background-color: rgba(255,255,255,0.3)">
                <!--label-width设置每个表单项 文本标签的宽度-->
                <el-form style="width: 400px;margin: 30px auto" label-width="60px">
                    <h1>欢迎来到宠物之家</h1>
                    <el-form-item label="用户名">
                        <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="position: relative;right: 30px" type="primary" @click="userLogin()">登录
                        </el-button>
                        <el-button style="position: relative;right: 30px" type="primary" @click="userRegister()">注册
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>

    </el-container>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let i=0;
    let str="";
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: ""
                },
            }
        },

        methods: {
            userLogin() {
                axios.post("/login", v.user).then(function (response) {
                    if (response.data == 1) {
                        location.href = "purchase.html"
                    } else if (response.data == 2) {
                        v.$message.error("用户名不存在!");
                    } else {
                        v.$message.error("密码错误!");
                    }
                })
            },
            userRegister(){
                location.href = "register.html"
            },
            func(v) {
                const voice = document.getElementById(v);
                voice.play();
                i++;
                str+=v;
                console.log("i=",i);
                console.log("str=",str);
                if(i===8&str==="v3v7v4v2v5v1v6v6"){
                    location.href = "adminLogin.html"
                }else if(i===8){
                    i=0;
                    str="";
                }

            }
        }
    })
</script>
</html>